<template>
  <div class="teamdetail">
    <van-nav-bar
      :title="$t('team.detailTitle')"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-tabs
      :active="active"
      sticky
      @change="onChange"
      line-width="20px"
      title-active-color="#ED008C"
      title-inactive-color="#666666"
    >
      <van-tab
        v-for="(item, index) of level"
        :title="item.name + '(' + data[item.label] + ')'"
        :name="item.value"
        :key="index + 'tab'"
      />
    </van-tabs>
    <div class="teamdetail-body">
      <!-- <van-list
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了~"
        @load="onLoad"
      > -->
      <van-cell
        v-for="(item, index) of userList"
        :key="index + 'list'"
        :border="false"
      >
        <template #title>
          <div class="custom-title">{{ item.nickName }}</div>
          <div class="custom-time">{{ item.createTime }}</div>
        </template>
        <template #right-icon>
          <span class="custom-id">ID: {{ item.userId }}</span>
        </template>
      </van-cell>
      <!-- </van-list> -->
      <Empty :description="$t('team.nodata')" v-if="!userList.length"></Empty>
    </div>
  </div>
</template>

<script setup>
import Empty from "@/components/Empty";
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { Toast } from "vant";
import { getSubordinateInfo } from "@/api/user";
import { onMounted } from "vue";
const { t } = useI18n();
const data = reactive({
  oneLevelNumber: 0,
  threeLevelNumber: 0,
  twoLevelNumber: 0,
  threeLevelUserList: [],
  twoLevelUserList: [],
  oneLevelUserList: [],
});
let userList = ref([]);
const loading = ref(false);
const finished = ref(false);
const active = ref("oneLevelUserList");
const level = reactive([
  { name: t("team.level"), value: "oneLevelUserList", label: "oneLevelNumber" },
  {
    name: t("team.seclevel"),
    value: "twoLevelUserList",
    label: "twoLevelNumber",
  },
  {
    name: t("team.thirdlevel"),
    value: "threeLevelUserList",
    label: "threeLevelNumber",
  },
]);
onMounted(async () => {
  getData();
});
function onChange(name, title) {
  active.value = name;
  userList.value = data[name];
}
async function onLoad() {
  getData();
}
async function getData(name) {
  console.log(3333);
  let res = await getSubordinateInfo().catch((err) => {
    Toast(err);
  });

  Object.assign(data, res.data);
  userList.value = data[active.value];
}
function onClickLeft() {
  history.back();
}
</script>

<style lang="less" scoped>
.teamdetail {
  height: 100vh;
  background: #f6f6f6;
  :deep(.van-nav-bar) {
    background: var(--title-background-color);
  }
  :deep(.van-nav-bar__title.van-ellipsis) {
    color: white;
  }
  :deep(i.van-badge__wrapper.van-icon.van-icon-arrow-left.van-nav-bar__arrow) {
    color: white;
  }
  &-body {
    width: 100%;
    position: relative;
    margin-top: 5px;
    .custom-title {
      font-size: 16px;
      line-height: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .custom-time {
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      margin-top: 10px;
    }
    .custom-id {
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-top: 12px;
    }
  }
  .van-cell.van-cell--borderless {
    border-bottom: 1px solid #f6f6f6;
  }
}
</style>
